<template>
    <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :height="height">
            <van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="goDetail(item.id)">
                <img :src="item.bannerUrl" alt="" :style="'width: 100%; object-fit: cover;height:' + height" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
    import { getBanner } from "@/api/product";

    export default {
        props: {
            height: {
                type: String,
                default: "100px",
            },
        },
        data() {
            return {
                bannerList: [],
            };
        },
        components: {},
        async mounted() {
            await this.getBannerList();
        },
        methods: {
            async getBannerList() {
                let list = await getBanner({ type: "产品" });
                this.bannerList = list;
            },
            goDetail(id) {
                this.$router.push(`/productDetail/${id}`);
            },
        },
    };
</script>
<style lang="scss" scoped>
    .my-swipe .van-swipe-item {
        color: #fff;
    }
</style>
